<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>
<script>
export default {
  name: 'sciecle',
  props: {
    handlingData: {
      type: Number
    }
  },
  watch: {
    handlingData(newValue) {
      this.handlingData = newValue
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      var getvalue = [this.handlingData]
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: getvalue + '%',
            textStyle: {
              color: '#3CBDD0',
              fontSize: 32
            },
            subtext: '处置率',
            subtextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 24
            },
            itemGap: 5,
            left: 'center',
            top: '30%'
          },
          tooltip: {
            formatter: function (params) {
              return '<span style="color: #fff;">处置率：' + getvalue + '%</span>'
            }
          },
          angleAxis: {
            max: 100,
            clockwise: true, // 逆时针
            // 隐藏刻度线
            show: false
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          polar: {
            center: ['50%', '50%'],
            radius: ['80%', '70%'] // 图形大小
          },
          series: [
            {
              type: 'bar',
              data: getvalue,
              showBackground: true,
              backgroundStyle: {
                color: '#BDEBFF'
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 30,
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#3CBDD0'
                    },
                    {
                      offset: 1,
                      color: '#3CBDD0'
                    }
                  ]),
                  shadowBlur: 5,
                  shadowColor: '#3CBDD0'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 380px;
}
</style>
